'use strict';
//定义生成1-20随机数
let secretNumber = Math.trunc(Math.random() * 20) + 1;

//定义初始得分
let score = 20;

//定义历史最高得分
let highScore = 0;

//消息提示函数
const displayMessage = function (message) {
  document.querySelector('.message').textContent = message;
};

//改变得分显示函数
const transformScore = function (score) {
  document.querySelector('.score').textContent = score;
};

//游戏结束函数----隐藏确定按钮,并提示点击再玩一次按钮
const gameOver = function () {
  document.querySelector('.check').style.display = 'none';
  document.querySelector('h1').textContent = '😁 游戏结束请点击再玩一次按钮！';
};

//游戏结束时----显示的背景颜色 两种情况传递两个不同参数(颜色) 1.赢得游戏 2.输掉游戏
const gameOverBg = function (bgColor) {
  document.querySelector('body').style.backgroundColor = bgColor;
};

//监听器 点击事件---确定按钮
document.querySelector('.check').addEventListener('click', function () {
  //获取输入框内容并强制转换为数字类型
  const guess = Number(document.querySelector('.guess').value);
  //当不输入数字，或输入的数字不在1-20范围内时，执行消息提示
  if (guess > 20 || guess < 1) {
    //调用消息提示函数
    displayMessage('😅 你输入的数字有误！');
  }
  //当输入的数字无误，但不等于答案数字时
  else if (guess !== secretNumber) {
    //当还有得分时
    if (score > 1) {
      //判断输入是数字大于还是小于答案数字，给出不同消息提示
      //调用消息提示函数
      displayMessage(
        guess > secretNumber ? '😂 你输入的数字偏大！' : '🤣 你输入的数字偏小！'
      );
      score--;
      //调用改变得分显示函数
      transformScore(score);
    }
    //当得分耗尽时
    else {
      //调用消息提示函数，提示输掉游戏
      displayMessage('😫 太遗憾了！你输掉了游戏！');
      //调用改变得分显示函数
      transformScore(0);

      //当因为输而导致的游戏结束时，传递的背景颜色为#A52A2A
      //document.querySelector('body').style.backgroundColor = '#A52A2A';
      gameOverBg('#A52A2A');

      //调用游戏结束函数
      gameOver();
    }
  }
  //当猜中了数字，赢得了游戏时
  else if (guess == secretNumber) {
    //调用消息提示函数，提示赢得了游戏
    displayMessage('😎 你赢得了游戏！');

    //当因为赢而导致的游戏结束时，传递的背景颜色为#60b347
    // document.querySelector('body').style.backgroundColor = '#60b347';
    gameOverBg('#60b347');
    document.querySelector('.number').style.width = '30rem';

    //调用游戏结束函数
    gameOver();

    //显示答案函数
    document.querySelector('.number').textContent = secretNumber;

    //记录最高分
    if (score > highScore) {
      highScore = score;
      document.querySelector('.highscore').textContent = score;
    }
  }
});

//监听器 点击事件---再玩一次按钮
document.querySelector('.again').addEventListener('click', function () {
  //重新分配得分
  score = 20;
  document.querySelector('.score').textContent = score;

  //重新生成1-20的随机数
  secretNumber = Math.trunc(Math.random() * 20) + 1;

  //重新显示消息提示
  //调用消息提示函数
  displayMessage('🤔 正在猜测......');

  document.querySelector('h1').textContent = '猜猜我的数字!'

  //重新隐藏答案数字
  document.querySelector('.number').textContent = '?';

  //恢复游戏进行中背景和答案数字框宽度
  document.querySelector('body').style.backgroundColor = '#222';
  document.querySelector('.number').style.width = '15rem';

  //重新显示确定按钮
  document.querySelector('.check').style.display = 'block';

  //清空猜字输入框
  document.querySelector('.guess').value = '';
});
